<template>
  <div style="clear: both;margin: 5px; border:1px solid lightgray;padding:15px 15px">
    <div class="url-bar">
      <div style="flex: 1; margin-right: 15px">
        <el-input v-model="url.main">
        <span slot="prepend">
          <el-select v-model="httpMethod" style="width: 100px;" :class="httpMethod">
            <el-option value="GET">GET</el-option>
            <el-option value="POST">POST</el-option>
            <el-option value="PUT">PUT</el-option>
            <el-option value="DELETE">DELETE</el-option>
            <el-option value="PATCH">PATCH</el-option>
            <el-option value="HEAD">HEAD</el-option>
            <el-option value="OPTION">OPTION</el-option>
          </el-select>
        </span>
        </el-input>
      </div>
      <el-button style="width: 8%" type="primary" @click="load" :disabled="loading">发送</el-button>
    </div>
    <el-tabs name="request" class="request" v-model="mainTab" :animated="false">
      <el-tab-pane tab="request" label="Params" name="Params">
        <InputTable v-if="mainTab === 'Params'" :data="requestParams.queryString" />
      </el-tab-pane>
      <el-tab-pane label="Headers" name="Headers" tab="request">
        <InputTable v-if="mainTab === 'Headers'" :data="requestParams.head" />
      </el-tab-pane>
      <el-tab-pane label="Body" name="Body" tab="request">
       <div style="display: flex;align-items: center;height: 33px;margin-bottom: 10px">
         <el-radio v-model="bodyType" label="none">none</el-radio>
         <el-radio v-model="bodyType" label="form-data">form-data</el-radio>
         <el-radio v-model="bodyType" label="x-www-form-urlencoded">x-www-form-urlencoded</el-radio>
         <el-radio v-model="bodyType" label="raw">raw</el-radio>
         <el-radio v-model="bodyType" label="binary">binary</el-radio>
         <div v-if="bodyType === 'raw'" style="flex: 1;display: flex; justify-content: space-between; align-items: baseline">
           <el-select
               style="width:260px;"
               size="small"
               transfer
               v-model="requestParams.raw.contentType"
           >
             <el-option value="text/plain" label="Text" />
             <el-option value="application/javascript" label="JavaScript" />
             <el-option value="application/json" label="JSON" />
             <el-option value="text/html" label="HTML" />
             <el-option value="application/xml" label="XML"/>
           </el-select>
           <div>
             <el-button type="primary" size="small" icon="el-icon-coin" @click="format(1)">压缩</el-button>
             <el-button type="primary" size="small" icon="el-icon-magic-stick" @click="format(2)">格式化</el-button>
           </div>
         </div>
       </div>
        <div v-if="bodyType === 'form-data'">
          <InputTable :data="requestParams.form.data" />
        </div>
        <div v-if="bodyType === 'raw'">
          <!-- JSON 源码编辑器-->
          <codemirror
              class="code-editor"
              ref="cm"
              v-model="requestParams.raw.json"
              :options="cmOption"
          ></codemirror>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-tabs class="response" name="response" value="responseContent" :animated="false">
      <el-tab-pane tab="response" label="返回内容" name="responseContent">
        <div style="clear:both;height:30px;font-size:8pt;">
          <div style="float:right;height:30px;">Elapsed: {{this.response.elapsed}}ms HTTP status code: <span v-html="formatStatusCode()"></span></div>
        </div>
        <!-- JSON 源码编辑器-->
        <codemirror class="code-editor" v-model="responseBody" :options="cmOption" style="height:300px;"></codemirror>
      </el-tab-pane>
      <el-tab-pane tab="response" label="返回头部" name="responseHead">
        <el-input type="textarea" :rows="8" :readonly="true" v-model="responseHead" />
      </el-tab-pane>
      <el-tab-pane tab="response" label="请求信息" name="requestHead">
        <el-input type="textarea" :rows="8" :readonly="true" v-model="requestAll" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script src="./index.js"></script>

<style lang="less" scoped>
.request {
  clear: both;
}

.context-type {
  background: #F5F7FA;
  padding: 0 6px;
  height: 32px;
  line-height: 32px;
  margin-right: 10px;
  border-radius: 4px;
  color: #606266;
}

.url-bar {
  display: flex;
}

.GET {
  background-color: #f5fffa;
  color: #19be6b;
}

.POST {
  background-color: #e8f2fc;
  color: #2db7f5;
}

.PUT {
  background-color: #fcf3e8;
  color: #f90;
}

.DELETE {
  background-color: #ffeeee;
  color: #ff4f4f;
}

.PATCH {
  background-color: #f1eafa;
  color: #7a00fd;
}

.HEAD {
  background-color: #e6faff;
  color: #02c4ff;
}

.OPTION {
  background-color: #e7ecfb;
  color: #0033fd;
}
</style>